<template>
  <div class="rg_layout">
    <div class="rg_left">
      <p>忘记密码</p>
      <p>USER REGISTER</p>
    </div>
    <div class="rg_center">
      <div class="rg_form">
        <div style="margin: 50px;"></div>
        <el-form ref="form" :model="form" status-icon :rules="rules" label-width="80px">
          <el-form-item label="Email" style="margin-bottom: 23px">
            <el-col :span="15">
              <el-input placeholder="请输入邮箱号" v-model="form.Email"></el-input>
            </el-col>
            <el-col :span="9">
              <el-button type="success" plain @click="sendEmail">发送邮件验证</el-button>
            </el-col>
          </el-form-item>
          <el-form-item label="验证码" style="margin-bottom: 23px">
            <el-col :span="15">
              <el-input
                  type="text"
                  placeholder="验证码将会发送到您的邮箱"
                  v-model="form.text"
                  oninput="value=value.replace(/\D/g,'')"
                  maxlength="6"
                  show-word-limit
              >
              </el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="重设密码" prop="pass" style="margin-bottom: 23px">
            <el-col :span="18">
              <el-input type="password" v-model="form.pass" autocomplete="off"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="重复密码" prop="checkPass">
            <el-col :span="18">
              <el-input type="password" v-model="form.checkPass" autocomplete="off"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-col :span="20">
              <el-button type="primary" @click="onSubmit" style="margin-top: 10px;margin-left: 80px">修改密码</el-button>
            </el-col>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="rg_right">
      <p>想起密码?
        <el-link icon="el-icon-user-solid" type="primary" @click="login_asd">立刻登陆</el-link>
      </p>
    </div>

  </div>

</template>

<script>
import axios from "axios";
export default {
  mounted() {
    this.$store.state.yesOrNo = false
  },
  name: "forgetPassword",
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.form.checkPass !== '') {
          this.$refs.form.validateField('checkPass');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.form.pass) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      form: {
        Email: "",
        pass: "",
        checkPass: "",
        text: ''
      },
      rules: {
        pass: [{validator: validatePass, trigger: 'blur'}],
        checkPass: [{validator: validatePass2, trigger: 'blur'}],
      }
    };
  },
  methods: {
    login_asd() {
      this.$router.replace({path: '/login'});
    },
    open1() {
      this.$message({
        showClose: true,
        message: this.msg,
        type: 'warning'
      });
    },
    open2() {
      this.$message({
        showClose: true,
        message: this.msg,
        type: 'success'
      });
    },
    open3() {
      this.$message({
        showClose: true,
        message: this.msg,
        type: 'error'
      });
    },
    sendEmail() {
      if (this.form.Email) {
        let _this = this
        axios.post(this.$store.state.url+':8412/user/sendForgetPasswordCode?email=' + _this.form.Email,
        ).catch(function (error) {
          _this.msg = "邮箱格式不正确！"
          _this.open1()
        }).then(function (response) {
          if (response.data.code === 200) {
            _this.msg = response.data.msg
            _this.open2()
          } else {
            _this.msg = response.data.msg
            _this.open3()
          }
        })
      } else {
        this.$message({
          showClose: true,
          message: '请输入邮箱',
          type: 'warning'
        });
      }
    },
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let _this = this
          axios.put(this.$store.state.url+':8412/user/userUpdatePassword?' +
              'email=' + this.form.Email + '&' +
              'password=' + this.form.pass + '&' +
              'code=' + this.form.text + '&'
          ).catch(function (error) {
            _this.msg = "邮箱格式有问题！"
            _this.open1()
          }).then(function (response) {
            if (response.data.code === 200) {
              _this.msg = response.data.msg
              _this.open2()
              _this.$router.replace({path: '/index'});
            } else {
              _this.msg = response.data.msg
              _this.open3()
            }
          })
        }
      })
    }
  }
}
</script>


<style>
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body {
  background-image: url(https://img-blog.csdnimg.cn/9cbef4a6f3ba493b969a73ee3f70e5d0.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 0px -50px;
}

.rg_layout {
  width: 850px;
  height: 450px;
  border: 5px solid #EEEEEE;
  background-color: white;
  opacity: 0.8;
  /*让div水平居中*/
  margin: auto;
  margin-top: 100px;
}

.rg_left {
  float: left;
  margin: 15px;
  width: 20%;
}

.rg_left > p:first-child {
  color: #FFD026;
  font-size: 20px;
}

.rg_left > p:last-child {
  color: #A6A6A6;
}

.rg_center {
  /*border: 1px solid red;*/
  float: left;
  width: 450px;
  /*margin: 15px;*/
}

.rg_right {
  float: right;
  margin: 15px;
}

.rg_right > p:first-child {
  font-size: 15px;
}

.rg_right p a {
  color: pink;
}

</style>
